<!DOCTYPE html>
<html lang="en">
<!-- head头部分开始 -->
<head>
    <include file="Public/public_head" title="{$category['cname']}-"  keywords="{$category['keywords']}" description="{$category['description']}" />
    <link rel="canonical" href="{:U('Home/Index/category',array('cid'=>$_GET['cid']),'',true)}" />
</head>
<!-- head头部分结束 -->
<body>
<!-- 顶部导航开始 -->
<nav class="fl-nav layui-header">
    <div class="fl-container">
        <if condition="$userInfo eq null ">
            <a href="javascript:;" class="fl-user userLoginBtn">
                <i class="fa fa-qq"></i>
            </a>
            <else />
            <a href="javascript:;" class="fl-user" style="right:40px;color: white;font-size: 16px;">
                {$userInfo['user_name']}
            </a>
            <a href="{:U('Home/Index/logout')}" style="position: absolute;right:-60px;z-index: 10;line-height: 64px;color: white;font-size: 16px;">
                退出登录
            </a>
        </if>
        <a href="/" class="fl-log">WhoCare</a>
        <ul class="layui-nav" lay-filter="">
            <li class="layui-nav-item ">
                <a href="{:U('Home/Index/index')}">
                    <i class="fa fa-home fa-fw"></i>网站首页
                </a>
            </li>
            <li class="layui-nav-item layui-this">
                <a href="{:U('Home/Index/ari')}">
                    <i class="fa fa-file-text fa-fw"></i>文章专栏
                </a>
            </li>
            <li class="layui-nav-item ">
                <a href="{:U('Home/Index/git')}">
                    <i class="fa fa-tags fa-fw"></i>资源分享
                </a>
            </li>
            <li class="layui-nav-item">
                <a href="{:U('Home/Index/chat')}">
                    <i class="fa fa-hourglass-half fa-fw"></i>点点滴滴
                </a>
            </li>
            <li class="layui-nav-item ">
                <a href="{:U('Home/Index/about')}">
                    <i class="fa fa-info fa-fw"></i>关于本站
                </a>
            </li>
        </ul>
        <a class="fl-navicon" href="javascript:;">
            <i class="fa fa-navicon"></i>
        </a>
    </div>
</nav>
<!-- 顶部导航结束 -->

<!-- 主体部分开始 -->
<div class="fl-body">
    <div class="fl-container">
        <div class="fl-main">
            <blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
                <a href="{:U('Home/Index/index')}">网站首页</a>
                <a><cite>文章专栏</cite></a>
            </blockquote>
            <!-- 左侧文章列表 -->
            <div class="fl-main-left" id="fl-flow-article">


                <div class="con">

                </div>
                <input id="page" type="hidden" value="1">

            </div>
            <!-- 右侧小栏目 -->
            <div class="fl-main-right">
                <div class="fl-article-category shadow categoryOut">
                    <div class="fl-article-category-title font-bold">分类导航</div>
                    <foreach name="categorys" item="v">
                        <a href="{:U('Home/Index/category',array('cid'=>$v['cid']))}" onclick="return recordId('cid',{$v['cid']})">{$v['cname']}</a>
                    </foreach>
                    <div class="clear"></div>
                </div>
                <div class="fl-module shadow">
                    <div class="fl-module-title font-bold"># 作者推荐</div>
                    <ul class="fa-ul fl-module-ul">
                        <foreach name="recommend" item="v">
                            <li>
                                <i class="fa fa-li layui-icon">&#xe609;</i>
                                <a href="{:U('Home/Index/article',array('aid'=>$v['aid']))}" target="_blank">{$v['title']}</a>
                            </li>
                        </foreach>
                    </ul>
                </div>
                <div class="fl-module shadow">
                    <div class="fl-module-title font-bold"># 随便看看</div>
                    <ul class="fa-ul fl-module-ul">
                        <foreach name="casually" item="v">
                            <li>
                                <i class="fa fa-li layui-icon">&#xe609;</i>
                                <a href="{:U('Home/Index/article',array('aid'=>$v['aid']))}" target="_blank">{$v['title']}</a>
                            </li>
                        </foreach>


                    </ul>
                </div>
                <!-- 右边悬浮 平板或手机 -->
                <div class="fl-category-toggle">
                    <i class="fa fa-chevron-left"></i>
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>
</div>
<!-- 底部 -->
<footer class="fl-footer">
    <p>
        <span>Copyright</span>
        <span>©</span>
        <span>2017</span>
        <a href="">WhoCare个人博客</a>
        <span>Design By WhoCare</span>
    </p>
    <p>
        <a href="" target="_blank">豫ICP备xxxxxxxx号-1</a>
    </p>
</footer>
<!-- 右侧导航 -->
<ul class="layui-nav layui-nav-tree layui-nav-side fl-nav-left layui-hide" lay-filter="nav">
    <li class="layui-nav-item layui-this">
        <a href="/"><i class="fa fa-home fa-fw"></i>&nbsp;网站首页</a>
    </li>
    <li class="layui-nav-item">
        <a href="{:U('Home/Index/ari')}"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a>
    </li>
    <li class="layui-nav-item">
        <a href="{:U('Home/Index/git')}"><i class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a>
    </li>
    <li class="layui-nav-item">
        <a href="{:U('Home/Index/chat')}"><i class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a>
    </li>
    <li class="layui-nav-item">
        <a href="{:U('Home/Index/about')}"><i class="fa fa-info fa-fw"></i>&nbsp;关于本站</a>
    </li>
</ul>
<!-- 分享窗体 -->
<div class="fl-share layui-hide ">
    <div class="fl-share-body">
        <div>
            <div class="flsharebuttonshare">
                <a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
                <a class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
                <a class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
                <a class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
            </div>
        </div>
    </div>
</div>
<!-- 遮罩 -->
<div class="fl-mask animated layui-hide"></div>
<script src="__PUBLIC__/static/whoCare/layui/layui.js"></script>
<script src="__PUBLIC__/static/whoCare/js/index.js"></script>

<script src="__PUBLIC__/static/whoCare/Qplayer/js/jquery.min.js"></script>
<include file="Public/public_login" />
<script>
    // $(function(){
    //     $(".con").load("{:U('Home/Index/moreCate')}");
    // });

//     $(window).scroll(
//         function() {
//             var scrollTop = $(this).scrollTop();
//             var scrollHeight = $(document).height();
//             var windowHeight = $(this).height();
//             if (scrollTop + windowHeight == scrollHeight) {
// // 此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
//                 var page=parseInt($("#page").val());
//                 $.post("{:U('Home/Index/more')}?p="+page,function (data) {
// //                console.log(data);
//                     $(".con").append(data);
//                     $("#page").val(page+1);
//                 });
//             }
//         });
    layui.use('flow', function(){
        var $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
        var flow = layui.flow;
        var page=parseInt($("#page").val());
        flow.load({
            elem: '#fl-flow-article' //指定列表容器
            ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                var lis = [];
                // //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                $.get("{:U('Home/Index/more')}?p="+page, function(res){
                    console.log(res);
                    //假设你的列表返回在data集合中
                    $(".con").append(res);
                    $("#page").val(page+1);

                    //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                    //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                    next(lis.join(''), page < res.pages);
                });
            }
        });
    });
</script>
</body>
</html>
